<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
        :root {
            --primary-color: #5e72e4;
            --secondary-color: #825ee4;
            --accent-color: #f5365c;
            --dark-color: #2d3748;
            --light-color: #f8fafc;
            --text-color: #222222;
        }

        body { 
            background: linear-gradient(135deg, #f6f9fc 0%, #e9eff5 100%);
            margin: 0;
            padding: 0;
            width: 1080px; /* 调整卡片宽度 */
            height: 1440px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--text-color);
        }
   
        .card {
            width: 1078px; /* 调整卡片宽度 */
            height: 1438px;
            background: white;
            border-radius: 40px; 
            overflow: hidden;
            position: relative;  
        }

        .card-header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 60px 40px;
            position: relative;
            overflow: hidden;
        } 

        .card-header::before {
            content: '';
            position: absolute;
            top: 100px;
            right: -100px;
            width: 250px;
            height: 250px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 50%;
        }

        .card-header::after {
            content: '';
            position: absolute;
            bottom: -25px;
            left: 60px;
            width: 50px;
            height: 50px;
            background: var(--primary-color);
            transform: rotate(45deg);
            z-index: 1;
        } 

        /* 答案部分样式 */
        .answer-section {  
          width: 1020px;
          margin: 0 auto;
          position: relative;
          z-index: 2;
        }
        
        .answer-section::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 8px;
          height: 100%;
          background-color: var(--light-color);
          border-radius: 8px;
        }
        
        .answer-wrap {
           padding-left: 30px;
        } 
        .answer-title {
            font-size: 36px;
            font-weight: bold;
            color: var(--light-color);
            margin-bottom: 20px; 
        }
        
        .answer-content { 
          font-size: 36px;
            font-weight: bold;
            color: var(--light-color)
        }
        .card-body {
          width: 1078px;
          margin: 40px auto;
        }

        .options {
            width: 1020px;
            margin: 0 auto
        }

        .option {
          display: flex;
          align-items: center;
          padding: 20px 0;
          margin-bottom: 16px;
          background: #f8fafc;
          border-radius: 12px;
          border: 1px solid #edf2f7;
          flex-wrap: nowrap;
          align-content: center;
          flex-direction: row;
        } 
    
        .option-label {
            font-weight: bold;
            font-size: 40px;
            color: var(--primary-color);
            width: 80px;
            height:80px;
            line-height: 80px;
            text-align: center;
            margin-right: 16px; 
        }

        .option-text {
            width: 920px; 
            font-weight: bold;
            font-size: 40px;
            word-break: break-word;
            color: var(--text-color);
        }   
  
  
  /* 解析部分样式 */
  .explanation-section {
    width: 1020px;
    margin: 40px auto 0; 
  }
  
  .explanation-title {
    font-size:36px;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 20px;
  }
  
  .explanation-content {
    font-size:28px;
    line-height: 1.8;
    color: var(--dark-color);
    text-align: justify;
    height: 1150px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 30;
    -webkit-box-orient: vertical;
  }
  
  /* 长文本自适应字体大小 */
  .long-text-20{
    font-size: 86px; 
  }
  .long-text-30{
    font-size: 72px; 
  }
  .long-text-40{
    font-size: 68px; 
  }
  .long-text-50{
    font-size: 64px; 
  }
  .long-text-70{
    font-size: 58px; 
  }
  .long-text-80{
    font-size: 54px; 
  }
  .long-text-90{
    font-size: 50px; 
  }
  .long-text-100{
    font-size: 46px; 
  }
  .long-text-150{
    font-size: 42px; 
  }
  .long-text-200{
    font-size: 38px; 
  }
  .long-text-300{
    font-size: 40px; 
  }
  .long-text-400{
    font-size: 38px; 
  }
  .long-text-500{
    font-size: 36px; 
  }
  .long-text-600{
    font-size: 34px; 
  }
  .long-text-end{
    font-size: 32px; 
  }
 
</style>
</head>
<body>
  <div class="card">  
    <div class="card-header">  
        <div class="answer-section">
          <div class="answer-wrap">
            <div class="answer-title">正确答案</div>
            <div class="answer-content">{{correct_answer}}</div>
          </div> 
        </div>
    </div> 
    <div class="card-body">
        <div class="explanation-section">
            <div class="explanation-title">题目解析</div>
            <div class="explanation-content {{explanation_text_size_class}}">　　{{explanation_text}}</div>
        </div>
    </div>
</div>
</body>
</html>